<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %></title>
    <link rel="stylesheet" href="/css/goods-list.css">
    <link rel="stylesheet" href="/css/order-detail.css">
    <link rel="stylesheet" href="/css/ywk-footer.css">
    <script src="/js/jquery-1.11.1.js"></script>

</head>
<%- include('ywk-header') -%>
<div class="container">
    <ul class="step">
        <li>
            <p>拍下商品</p>
            <p id="buy-date">22点33分</p>
        </li>
        <li>
            <p>订单支付</p>
            <p id="pay-date">22点33分</p>
        </li>
        <li>
            <p>卖家发货</p>
            <p id="fly">22点33分</p>
        </li>
        <li>
            <p>确认收货</p>
            <p id="sure">22点33分</p>
        </li>
        <li>
            <p>评价</p>
            <p> - </p>
        </li>
    </ul>
    <div class="content">
        <div class="left-d">
            <h4 class="d-title">订单信息</h4>
            <p>
                收货地址：<span class="ad"></span>
            </p>
            <p>
                收&ensp;货 &ensp;人:&ensp;<span class="pet"></span>
            </p>
            <p>
                联系电话： <span class="tel"></span>
            </p>
            <p>
                买家留言：-
            </p>
            <p>
                卖家备注：-
            </p>
            <p>
                订单编号： <span class="id"></span>
            </p>
        </div>
        <div class="right-d">

        </div>
    </div>
</div>
<%- include('ywk-footer') -%>

<script>
    var search = location.search;
    var id = search.split('=')[1];
    console.log(id);
    $(function () {
        $.ajax({
                url: '/myorder/detail',
                method: 'GET',
                data: {
                    id: id
                }
            })
            .done(function (res) {
                console.log(res.data);
                render(res.data);
            })
            .fail(function (err) {
                console.log(err);
            });

        function render(data) {
            var ad = data.ad;
            var data = data.list;
            $('#buy-date').text(data[0].buy_date);
            $('#pay-date').text(data[0].pay_date);
            var fly = $('#pay-date').text();
            var fa = fly.substr(0, 9);
            var day = parseInt(fly.substr(9, 1)) + 1;
            var h = Math.floor(Math.random() * 24);
            if (h < 10) {
                h = '0' + h;
            }
            var m = Math.floor(Math.random() * 24);
            if (m < 10) {
                m = '0' + m;
            }
            var s = Math.floor(Math.random() * 24);
            if (s < 10) {
                s = '0' + s
            }
            console.log(h, m, s);
            console.log(fa, day);
            var time = h + ':' + m + ':' + s
            var fahuo = fa + day + ' ' + time;
            console.log(fahuo);
            $('#fly').text(fahuo);
            var sureday = parseInt(fahuo.substr(9, 1)) + 3;
            var sure = fa + sureday + ' ' + time;
            $('#sure').text(sure);
            $('.ad').text(data[0].detail_address);
            $('.pet').text(ad[0].receiver);
            $('.tel').text(ad[0].tel);
            $('.id').text(data[0].o_id);
            var pd = data[0].buy_date.substr(8,2);

            pd = parseInt(pd) + 7;
            console.log('pd:',pd);
            function randomNum(minNum, maxNum) {
                switch (arguments.length) {
                    case 1:
                        return parseInt(Math.random() * minNum + 1, 10);
                        break;
                    case 2:
                        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
                        break;
                    default:
                        return 0;
                        break;
                }
            }
            var arr = ['韵达快递', '申通快递', '中通快递', '圆通快递', '百世快递'];
            var kd = arr[randomNum(0, 4)];
            var $item = `
                    <h3>订单状态：xxxxxxxxxx</h3>
                    <p class='st'> 您还有
                        <span id="_d">00</span>  
                        <span id="_h">00</span>  
                        <span id="_m">00</span>  
                        <span id="_s">00</span> 
                        ;来确认收货,超时订单自动确认收货
                    </p>
                    <p>物流：${kd}</p>
                    <p>运单号: ${data[0].exp_id}</p>
                    <p class='qs'>${sure} [代收点]已签收，签收人凭取货码签收。感谢使用菜鸟驿站代理点【百世邻里】，期待再次为您服务。</p>
                    `;
            $('.right-d').append($item);

            function countTime() {
                //获取当前时间  
                var date = new Date();
                var now = date.getTime();
                //设置截止时间  
                var str = "2020/11/"+pd+" 00:00:00";
                var endDate = new Date(str);
                var end = endDate.getTime();

                //时间差  
                var leftTime = end - now;
                //定义变量 d,h,m,s保存倒计时的时间  
                var d, h, m, s;
                if (leftTime >= 0) {
                    d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
                    h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
                    m = Math.floor(leftTime / 1000 / 60 % 60);
                    s = Math.floor(leftTime / 1000 % 60);
                }
                //将倒计时赋值到div中  
                document.getElementById("_d").innerHTML = d + "天";
                document.getElementById("_h").innerHTML = h + "时";
                document.getElementById("_m").innerHTML = m + "分";
                document.getElementById("_s").innerHTML = s + "秒";
                //递归每秒调用countTime方法，显示动态时间效果  
                setTimeout(countTime, 1000);
            }
            var $dzf = `
                您还有
                <span id="_d">00</span>  
                <span id="_h">00</span>  
                <span id="_m">00</span>  
                <span id="_s">00</span> 
                ;来支付订单,超时订单将自动取消
            `;
            var $dfh = `
                
                <span id="_d">00</span>  
                <span id="_h">00</span>  
                <span id="_m">00</span>  
                <span id="_s">00</span> 
                内，卖家未发货,订单将自动取消
            `;
            var $dsh = `
                您还有
                <span id="_d">00</span>  
                <span id="_h">00</span>  
                <span id="_m">00</span>  
                <span id="_s">00</span> 
                ;来确认收货,超时订单自动确认收货
            `;
            countTime();
            if (data[0].state == '已收货') {
                $('h3').text('订单状态：买家已收货');
                $('.st').html(' ');
            } else if (data[0].state == '待支付') {
                $('h3').text('订单状态：商品已拍下，等待买家付款');
                $('.st').html($dzf);
                $('.st').nextAll().empty();
                $('#pay-date').empty();
                $('#fly').empty();
                $('#sure').empty();
            } else if (data[0].state == '待发货') {
                $('h3').text('订单状态：买家已付款，等待卖家发货');
                $('.st').html($dfh);
                $('.st').nextAll().empty();
                $('#fly').empty();
                $('#sure').empty();
                kd = '';
            } else if (data[0].state == '待收货') {
                $('h3').text('订单状态：商家已发货，等待买家确认');
                $('.st').html($dsh);
                $('.qs').empty();
            }
        }
    })
</script>
</body>

</html>